<template>
	<div id="profit">
		<div class="details" v-show="moduleDetail==0">
			<div class="timeContainer">
				<div class="time" v-text="times[time].text+'盈亏'"></div>
				<img src="~@/assets/images/explain.png" class="explain" @click="showModal">
			</div>
			<div class="detailedProfit">
				<div class="unit">￥</div>
				<div class="number" v-text="totalProfit"></div>
				<div class="empty"></div>
			</div>
			<div class="rate">
				<div v-text="times[time].text+'收益率'"></div>
				<div v-text="message.total_profit_rate+'%'"></div>
			</div>
		</div>
		<return-error v-show="moduleDetail==1"></return-error>
		<return-empty v-show="moduleDetail==2"></return-empty>
	</div>
</template>

<script>
	import RemoteDAO from '@/common/remoteDAO'
	import defeat from './defeat'

	export default{
		props: {
			time: {
				type: Number
			},
			totalProfit: {
				type: String
			},
			profitrate: {
				type: String
			},
			assetStat : {
				type:Number
			}
		},
		data() {
			return {
				moduleDetail:0,
				message:{
					total_profit:'',
					total_profit_rate:'',
					time:'',
					tradedate:''
				},
				times:[
					{
					name:'today',
					text:'今日',
					num:'1',
					monthNum:1
					},
					{
					name: 'curmonth',
					text: '本月',
					num:'30',
					monthNum:1
					},
					{
					name: 'quarter',
					text: '近三个月',
					num:'90',
					monthNum:3
					},
					{
					name: 'halfyear',
					text: '近半年',
					num:'180',
					monthNum:6
					},
					{
					name: 'year',
					text: '今年',
					num:'365',
					monthNum:12
					},
					{
					name: '2016',
					text: '2016',
					num:'366',
					monthNum:12
					}
				]
			}
		},
		mounted(){
			this.initEvent()
		},
		watch:{
			time:function(){
				setTimeout(()=>{
					this.initEvent()
				},0)
			},
			profitrate:function(){
				this.message.total_profit_rate=this.profitrate
			}
		},
		methods:{
			initEvent(){
				this.moduleDetail=0
				let self=this
				let obj={"pagenum": this.times[this.time].num,"recent": this.times[this.time].name}
				if(this.time==0){
					this.message.total_profit_rate=this.profitrate
				}
				else{
					RemoteDAO.callZL13100010(obj,self.ZL13100010);
				}
			},
			ZL13100010(result){
				if(result.error=='1'){
					this.moduleDetail=1
				}
				else{
					let data=result.data;
					let bigdata=JSON.parse(data).body[0].bigdata;
					let specData=JSON.parse(bigdata).hits.hits;
					if(specData.length==0){
						this.moduleDetail=2
					}
					else{
						let num=specData[specData.length-1]._source.total_profit_rate_total*100;
					    this.message.total_profit_rate=num.toFixed(2);
					}
				}
			},
			showModal(){
				this.$emit('showmodal')
			}
		}
	}
</script>

<style scoped>
#profit{
	background: #fff;
}
.details {
	height: 260px;
	box-sizing: border-box;
	background-image: url(~@/assets/images/banner.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	color: #fff;
	text-align: center;
	padding-top: 32px;
}

.time {
	font-size: 24px;
	opacity: 0.8;
}

.detailedProfit {
	margin-top: 20px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: baseline;
}


.unit {
	width: 1px;
	flex-grow: 1;
	font-size: 32px;
	text-align: right;
}

.number {
	font-size: 60px;
	line-height: 60px;
	padding: 0 10px;
}

.empty{
	width: 1px;
	flex-grow: 1;
}

.rate {
	height: 20px;
	margin-top: 30px;
	opacity: 0.8;
	font-size: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.rate div {
	padding: 0 10px;
}
.timeContainer{
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.explain{
	height: 24px;
	margin-left: 10px;
}
</style>